<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="box">
	<span>用户名:</span><input type="text" v-model="name"><br>
	<span>密码</span><input type="password" v-model="pwd"><br>
	<span>确认密码</span><input type="password" v-model="newpwd"><br>
	<span>性别</span><label><input type="radio" name="xi" v-model="sex" value="男">男</label><label><input type="radio"
			name="xi" v-model="sex" value="女">女</label><br>
	<span>兴趣爱好</span><label><input type="checkbox" v-model="hobby" value="王者荣耀">王者荣耀</label><label><input
			type="checkbox" v-model="hobby" value="三角洲">三角洲</label><label><input type="checkbox" v-model="hobby"
			value="原神">原神</label><label><input type="checkbox" v-model="hobby" value="崩铁">崩铁</label><br>
	<span>所属地区</span><select v-model="num1">
		<option :value="index" v-for="(item,index) in arr" :key="index">{{item.name}}</option>
	</select>
	<select v-model="num2">
		<option :value="index" v-for="(item,index) in arr[num1].city" :key="index">{{item.name}}</option>
	</select>
	<select :value="num3">
		<option :value="index" v-for="(item,index) in arr[num1].city[num2].districtAndCounty" :key="index">{{item}}
		</option>
	</select><br>
	<button @click="is=true">提交</button>
	<div v-show="is">
		用户名{{name}}<br>
		密码{{pwd}} <br>
		性别{{sex}} <br>
		兴趣爱好{{hobby}} <br>
		所属地区{{arr[num1].name}}{{arr[num1].city[num2].name}}{{arr[num1].city[num2].districtAndCounty[num3]}}
	</div>
</div>
<script>
	new Vue({
		el: "#box",
		data: {
			name: "",
			pwd: "",
			newpwd: "",
			sex: "",
			hobby: [],
			is: false,
			num1: 0, 
			num2: 0, 
			num3: 0,
			arr: [{
				name: "河北省",
				city: [{
					name: "石家庄市",
					districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
				}, {
					name: "张家口市",
					districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
				}, {
					name: "承德市",
					districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
				}, {
					name: "秦皇岛市",
					districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
				}]
			}, {
				name: "山西省",
				city: [{
					name: "太原市",
					districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
				}, {
					name: "朔州市",
					districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
				}, {
					name: "大同市",
					districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
				}, {
					name: "阳泉市",
					districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
				}]
			}],
		}
	})
</script>